<template>
	<view class="titlebox">
		<van-nav-bar class="titleBox" title="个人信息" left-arrow @click-left="onClickLeft" bind:click-right="onClickRight" />
		</van-nav-bar>
		<van-cell-group>
			<van-field @blur="nameEvent(name)" class="name" label="姓名" left-icon="user-circle-o" :value="name" @change="nameCang"
			 placeholder="请输入姓名" required />
			<van-field @focus="showPopup" label="性别" left-icon="flower-o" :value="sex" placeholder="请输入性别" right-icon="arrow" required />
			<van-field @blur="IDNumberBlur" class="inputBox" label="身份证号码" left-icon="other-pay" :value="IDNumber" @change="IDNumberChange"
			 placeholder="正确的身份证号才能预约成功" required />
			<van-field @blur="mobNumberBlur(mobNumber)" label="手机号码" left-icon="phone-circle-o" :value="mobNumber" @change="mobNumberChange"
			 placeholder="请输入手机号码" required />
			<van-field @blur="emailBlur(email)" label="电子邮箱" left-icon="free-postage" :value="email" @change="emailChange"
			 placeholder="请输入电子邮箱" />
			<van-field label="车牌号" left-icon="logistics" :value="carNumber" @change="carNumberChange" placeholder="请输入车牌号" />
		</van-cell-group>

		<!-- <van-cell title="展示弹出层" is-link @click="showPopup" /> -->
		<van-popup round="true" custom-style="height:100px" position="bottom" :show="show" @close="onClose">
			<van-radio-group class="popupShow" :value="radio" @change="onChange">
				<van-radio class="MAN" name="1">男</van-radio>
				<van-radio class="WOMAN" name="2">女</van-radio>
			</van-radio-group>
		</van-popup>
		<view class="btn">
			<van-button class="btn" type="primary" block color="#3578E5" @tap="submitEvent">{{submit}}</van-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				sex: "",
				IDNumber: "",
				mobNumber: "",
				email: "",
				carNumber: "",
				submit: "确 认 提 交",
				show: false,
				radio: '',
			}
		},
		methods: {
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			nameEvent(name) {
				if (!/^[\u4e00-\u9fa5]{2,6}$/.test(name)) {
					uni.showToast({
						title: '姓名格式错误',
						icon: 'loading'
					})
				}
			},
			nameCang(n) {
				this.name = n.detail;
			},
			IDNumberChange(id) {
				this.IDNumber = id.detail;
			},
			IDNumberBlur() {
				if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.IDNumber)) {
					uni.showToast({
						title: '身份证号不正确',
						icon: 'loading'
					})
				}
			},
			mobNumberChange(mob) {
				this.mobNumber = mob.detail;
			},
			mobNumberBlur(mob) {
				if (!/^1[3-9]\d{9}$/.test(mob)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'loading'
					})
				}
			},
			emailChange(em) {
				this.email = em.detail;
			},
			emailBlur(email) {
				if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)) {
					uni.showToast({
						title: '邮箱格式错误',
						icon: 'loading'
					})
				}
			},
			carNumberChange(car) {
				this.carNumber = car.detail;
			},
			// 遮罩层弹框
			showPopup() {
				this.show = true;
			},
			onClose() {
				this.show = false;
			},
			onChange(event) {
				this.radio = event.detail;
				if (this.radio == 1) {
					this.sex = "男";
				} else if (this.radio == 2) {
					this.sex = "女";
				} else {
					this.sex = "";
				}
				this.show = false;
			},
			submitEvent() {
				if (this.name == "" || this.sex == "" || this.mobNumber == "" || this.carNumber == "") {
					uni.showToast({
						title: '必填项不为空',
						icon: 'loading'
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			}
		}

	}
</script>

<style>
	body {
		background-color: #f0f0f0;
	}

	.name {
		display: block;
		margin-top: 8upx;
	}

	.inputBox {
		display: block;
		margin: 10upx 0;
	}

	.btn {
		width: 70%;
		margin: 0 auto;
		margin-top: 50px;
		border-radius: 15px;
	}

	.van-radio {
		width: 12%;
		height: 24px;
		margin: 0 auto;
		margin-top: 18px;
	}
</style>
